<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@include file="include.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8" />
<title>折线图</title>
<script src="js/jquery.min.js"></script>
<script src="js/highcharts.js"></script>
</head>
<body>
	<div id="container" style="width: 550px; height: 400px; margin: 0 auto"></div>
	<script language="JavaScript">
		$(document).ready(
				function() {
					var title = {
						text : '能源消耗计划对比'
					};
					var subtitle = {
						text : 'From: <%=from%>  ------------ To:  <%=to%>'
					};
					var xAxis = {
						categories : [ '<%=cate1%>', '<%=cate2%>', '<%=cate3%>', '<%=cate4%>',
								'<%=cate5%>', '<%=cate6%>']
					};
					var yAxis = {
						title : {
							text : '消耗量'
						},
						plotLines : [ {
							value : 0,
							width : 1,
							color : '#808080'
						} ]
					};

					var tooltip = {
						valueSuffix : ''
					}

					var legend = {
						layout : 'vertical',
						align : 'right',
						verticalAlign : 'middle',
						borderWidth : 0
					};

					var series = [
							{
								name : '计划消耗',
								data : [ <%=data1-50%>, <%=data2-30%>, <%=data3-40%>, <%=data4+20%>, <%=data5+100%>, <%=data6-70%>]
							},
							{
								name : '实际消耗',
								data : [ <%=data1%>, <%=data2%>, <%=data3%>, <%=data4%>, <%=data5%>, <%=data6%>]
							} ];

					var json = {};

					json.title = title;
					json.subtitle = subtitle;
					json.xAxis = xAxis;
					json.yAxis = yAxis;
					json.tooltip = tooltip;
					json.legend = legend;
					json.series = series;

					$('#container').highcharts(json);
				});
	</script>
</body>
</html>
